<% this.title = article.title + ' - 帖子'; %>
<% include header %>
<div class="ui error message" id="error" hidden></div>
<div class="ui middle aligned center aligned grid">
  <div class="row">
    <div class="column" style="max-width: 450px">
      <h2 class="ui image header">
        <div class="content" style="margin-bottom: 10px; ">
          输入密码以查看讨论
        </div>
      </h2>
      <form class="ui large form">
        <div class="ui existing segment">
          <div class="field">
            <div class="ui left icon input">
              <i class="lock icon"></i>
              <input name="password" placeholder="讨论密码" type="password" id="password" onkeydown="key_view(event)">
            </div>
          </div>
          <div class="field">
            <div class="ui two column grid">
							<div class="column">
								<img id="captcha_img" src="/api/captcha" onclick="this.src = this.src.split('?')[0] + '?_t=' + Math.random()" height="38px" width="200px" style="cursor: pointer">
							</div>
							<div class="column">
								<input name="captcha" placeholder="输入验证码" type="text" id="captcha" onkeydown="key_view(event)">
							</div>
						</div>
          </div>
          <div class="ui fluid large submit button" id="view">查看</div>
        </div>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript">
  function key_view(event) {
    if (event.keyCode == 13) {
        view();
    }
  }
  function show_error(error) {
    $("#error").text(error);
    $("#error").show();
  }
  function view() {
    $("view").addClass("loading");
    $.ajax({
      url: "/article/<%= article.id %>",
      type: 'POST',
      data: {
        "password": $("#password").val(),
        "captcha": $("#captcha").val()
      },
      async: true,
      success: function(data) {
        switch (data.error_code) {
          case 1000:
            show_error("请登录后继续");
            break;
          case 1001:
            show_error("无此帖子");
            break;
          case 1002:
            show_error("密码错误");
            break;
          case 1003:
            show_error("您没有权限进行此操作");
            break;
          case 1004:
            show_error("验证码错误");
            break;
          case 1:
            $("html").html($(data.html));
            return;
          default:
            show_error("未知错误");
            break;
        }
        $("view").text("查看");
        $("view").removeClass("loading");
        $("#captcha_img").click();
      },
      error:  function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest.responseText);
        show_error("未知错误");
        $("#view").text("查看");
        $("view").removeClass("loading");
        $("#captcha_img").click();
      }
    })
  }
  $(document).ready(function() {
    $("#view").click(function() {
        view();
    });
  })
</script>
<% include footer %>